<template>
  <div class="container">
    <img src="../../assets/image/backgroundImage.jpg" alt="" class="background-image"/>
    <div class="white-mask"></div>
    <el-card class="login-card">
      <img src="../../assets/image/logo-title.png" alt="" style="width: 100%;height: 100%"/>
      <div class="main-content">
        <div class="card-title">
          {{ isLogin ? '登录' : '注册' }}
          <div class="card-title-bottom-line"></div>
        </div>
        <div class="card-tips" @click="toRegister">{{ isLogin ? '没有账号？立即注册' : '已有帐号？立即登录' }}
          <div class="right-arrow"></div>
        </div>
        <div class="blank"></div>
        <el-form ref="form" :model="form" label-width="auto">
          <el-form-item label="用户名" class="input-wrapper" prop="username">
            <input v-model="form.username" type="text" class="text-input email" placeholder=" ">
            <label class="input-label">请输入用户名</label>
          </el-form-item>
          <el-form-item label="密码" class="input-wrapper" prop="password">
            <input v-model="form.password" type="password" class="text-input email" placeholder=" " @keydown.enter="submit">
            <label class="input-label">请输入密码</label>
          </el-form-item>
          <el-form-item label="确认密码" class="input-wrapper" v-if="!isLogin" prop="confirmPassword">
            <input v-model="form.confirmPassword" type="password" class="text-input email" placeholder=" " @keydown.enter="submit">
            <label class="input-label">请再次输入密码</label>
          </el-form-item>
        </el-form>
        <div class="submit-button">
          <el-button :icon="buttonIcon" size="small" class="inner-btn" @click="submit"
                     :style="{backgroundColor: buttonBackgroundColor,color: buttonColor}">
            {{ buttonText }}
          </el-button>
        </div>
      </div>
    </el-card>

  </div>
</template>

<script>
import {login,register} from "@/api/login";

export default {
  name: 'Login',
  data() {
    return {
      form: {
        username: '',
        password: '',
        confirmPassword: ''
      },
      buttonText: '登录',
      buttonIcon: 'el-icon-s-promotion',
      buttonColor: '#2997f7',
      buttonBackgroundColor: '#e9f4fe',
      isLogin: true,
    }
  },
  methods: {
    reset() {
      this.form = {
        username: '',
        password: '',
        confirmPassword: ''
      }
    },
    toRegister() {
      let dom = document.querySelector('.main-content')
      dom.style.opacity = 0

      setTimeout(() => {
        dom.style.opacity = 1
      }, 300)

      setTimeout(() => {
        this.reset();
        this.isLogin = !this.isLogin
        this.buttonText = this.isLogin ? '登录' : '注册'
        this.buttonIcon = this.isLogin ? 'el-icon-s-promotion' : 'el-icon-s-check'
        this.buttonColor = this.isLogin ? '#2997f7' : '#18a62a'
        this.buttonBackgroundColor = this.isLogin ? '#e9f4fe' : '#e7f8e9'
      }, 300)
    },
    submit() {
      if ( this.form.username.length < 5 || this.form.username.length > 10 ) {
        this.$message.error('用户名长度应在5-10位之间')
        return;
      }

      if ( this.form.password.length < 5 || this.form.password.length > 10 ) {
        this.$message.error('密码长度应在5-10位之间')
        return;
      }

      if ( !this.isLogin && this.form.password !== this.form.confirmPassword ) {
        this.$message.error('两次输入的密码不一致')
        return;
      }

      if (this.isLogin) {
        login(this.form).then(res => {
          this.$notify({
            title: '登陆成功',
            message: '欢迎您再次回到橡胶树石细胞智能分割计算系统！',
            type: 'success'
          })
          let token = res.data;
          sessionStorage.setItem('token', token)
          this.$router.push('/home/singleSegmentation')
        })
      } else {
        register(this.form).then(res => {
          this.$notify({
            title: '注册成功',
            message: '欢迎您来到橡胶树石细胞智能分割计算系统！',
            type: 'success'
          })
          let token = res.data;
          sessionStorage.setItem('token', token)
          this.$router.push('/home/singleSegmentation')
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  .background-image {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .white-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: rgba(255, 255, 255, 0.4); /* 半透明背景 */
    backdrop-filter: blur(1.5px);
  }

  .login-card {
    z-index: 99;
    width: 20%;
    padding: 5px;
    border-radius: 8px;

    .main-content {
      opacity: 1;
      transition: opacity 0.25s ease-in-out;

      .card-title {
        margin-top: 10px;
        font-size: 1.6rem;
        font-weight: 700;
        cursor: default;

        .card-title-bottom-line {
          width: 2.5rem;
          height: 0.2rem;
          background-color: #66ccff;
          margin-top: 0.1rem;

          transition: all 0.5s;
        }
      }

      .card-title:hover {
        .card-title-bottom-line {
          width: 4rem;
        }
      }

      .card-tips {
        width: 45%;
        margin-top: 0.2rem;
        color: grey;
        font-size: 14px;
        display: flex;
        align-items: center;
        cursor: pointer;

        .right-arrow {
          width: .3rem;
          height: .3rem;
          border-top: 2px solid grey;
          border-right: 2px solid grey;
          transform: rotate(45deg);
          margin-left: 2px;
        }
      }

      .card-tips:hover {
        color: #66ccff;
        transition: all 0.3s;

        .right-arrow {
          border-top: 2px solid #66ccff;
          border-right: 2px solid #66ccff;
        }
      }

      .blank {
        height: 30px;
      }

      .input-wrapper {
        width: 95%;
        position: relative;
      }

      .text-input {
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 12px;
        outline: none;
        width: 95%;

        position: relative;
        background-color: transparent;
        z-index: 1;
      }

      .text-input:focus {
        border: 1.5px solid #24a0ed;
      }

      .input-label {
        background-color: white;
        position: absolute;
        color: #aaa;
        height: 35px;

        top: 0.1rem;
        left: 0.75rem;
        font-size: 0.9rem;

        z-index: 2;

        transition: .3s;
        pointer-events: none;
      }

      .text-input:focus + .input-label {
        top: -1.0rem;
        left: 0.5rem;

        transform: scale(0.75);
        color: #24a0ed;
        font-weight: 500;
      }

      /* placeholder 没有显示状态下，且没有focus的 text-input */

      .text-input:not(:placeholder-shown).text-input:not(:focus) + .input-label {
        top: -1.0rem;
        left: 0.5rem;

        transform: scale(0.75);
        color: #24a0ed;
        font-weight: 500;
      }

      .submit-button {
        width: 80%;
        margin: 0 auto;
        font-size: 0.9rem;

        .inner-btn {
          width: 100%;
          border: 1px solid #e9f4fe
        }
      }
    }
  }
}
</style>